<template>
  <div class="view-account">
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="text">naive-admin-vue</div>
      </div>
      <div class="view-account-cont">
        <label>账号</label>
        <n-input size="large" v-model:value="formData.account" type="input" placeholder="账号"/>
      </div>
      <div class="view-account-cont">
        <label>密码</label>
        <n-input
            type="password"
            size="large"
            style="width: 100%"
            v-model:value="formData.password"
            show-password-toggle
            placeholder="密码"
            :maxlength="8"/>
      </div>
      <div class="view-account-cont flex">
        <n-input
            type="input"
            v-model:value="formData.captcha"
            placeholder="请输入验证码"
            :maxlength="4"
        />
        <span class="view-code" v-html="vcodeBase64" @click="handleGetVCode"></span>
      </div>

      <div class="view-account-cont-btn">
        <n-button style="height: 60px" size="large" @click="handleLogin" class="other" type="primary">登录</n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from "../../store/userStore";
import { apiAdminLogin, apiGetVCode } from "../../api/user";
import { useMessage } from "naive-ui";

/** 挂载提示到window */
// @ts-ignore
window.$message = useMessage()

onBeforeMount(async () => {
  await handleGetVCode();
})

// 获取验证码
const vcodeBase64 = ref(null)

async function handleGetVCode() {
  const data:any = await apiGetVCode();
  const { token, vcode } = data;
  const { SET_VCODE_TOKEN } = useUserStore();
  SET_VCODE_TOKEN(token)
  vcodeBase64.value = vcode;
}

// 表单
const formData = reactive({
  account: 'lzz',
  password: 'lzz',
  captcha: ''
})

const router = useRouter();

async function handleLogin() {
  await apiAdminLogin(formData);
  router.replace('/');
}

</script>

<style lang="scss" scoped>
.view-account {
  display: flex;
  height: 100vh;
  overflow: auto;

  &-top {
    padding: 12px 0;
    text-align: center;

    .img {
      width: 80%;
    }

    .text {
      font-size: 36px;
      padding: 12px 0;
      color: #18a058;
      font-weight: 700;
    }
  }

  &-container {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image: linear-gradient(to bottom,rgba(247, 248, 252,0),rgb(247, 248, 252));
    //background-color: #f7f8fc;
    width:400px;
    height: 600px;
    border-radius: 20px;
    padding: 30px;
    max-width: 384px;
    margin: 0 auto;

    @media screen and (max-width: 400px) {
      width: 100%;
    }
  }

  &-cont {
    padding: 10px 0;

  }
  &-cont-btn{
    margin-top: 50px;
  }

  &-code {
    height: 35px;
    width: 128px;
    margin-left: 10px;
    border: 1px solid #ccc;
  }

  &-code {
    cursor: pointer;
  }
}

.other {
  width: 100%;
}

.view-account {
  background-image: url('@/assets/images/bg.jpg');
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;

}
</style>
